<template>
    <div class="detail">
        <div class="detail-step1">
            <form-layout
                :form="form"
                :config="config"
            >
                <template slot="recordTime" slot-scope="scope">
                    <el-date-picker
                        class="detail-datetimerange"
                        v-model="form[scope['item']['name']]"
                        type="datetimerange"
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                </template>
                <template slot="uploadFile" slot-scope="scope">
                    <el-upload
                        class="upload-file"
                        ref="upload"
                        action=""
                        :on-change="handleChange"
                        :on-remove="handleRemove"
                        :auto-upload="false"
                        :limit="1"
                        :http-request="customUpload"
                        :accept="'video/*'"
                    >
                        <el-button slot="trigger" type="primary">选取视频</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传视频，格式为（MP4|WebM|Ogg）</div>
                    </el-upload>
                </template>
                <template slot="footer" slot-scope="scope">
                    <div class="detail-footer">
                        <el-button type="primary" @click.native.prevent="onSubmit(scope)">上传</el-button>
                    </div>
                </template>
            </form-layout>
        </div>
    </div>
</template>

<script>
// 上传视频接口
import { Test_Video_AddInfo } from '@/server/testVideoManage'

export default {
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data(row) {
            this.form = Object.assign({},this.form,row)
            // this.form = Object.assign({},this.form,row, {videoContent: '4582644', recordTime: ['2024-06-28 00:00:00', '2024-06-29 00:00:00']})
        }
    },
    data() {
        return {
            loading: false,
            // 表单内容
            form: {
                videoContent: '', //视频内容
                recordTime: '', //录制时间
                uploadFile: '' //上传文件
            },
            config: {
                fieldsConfig: [{
                    cols: 12,
                    name: 'taskCode',
                    label: '任务单编号：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入服务名称'
                }, {
                    cols: 12,
                    name: 'entrustTime',
                    label: '委托日期：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入服务地址'
                }, {
                    cols: 12,
                    name: 'samplePart',
                    label: '部位：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入大小所属图层'
                }, {
                    cols: 12,
                    name: 'sampleLevel',
                    label: '级别：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入大小所属图层'
                }, {
                    cols: 12,
                    name: 'initCheck',
                    label: '初/复检：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入大小所属图层'
                }, {
                    cols: 12,
                    name: 'sampleName',
                    label: '样品名称：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入'
                }, {
                    cols: 24,
                    name: 'videoContent',
                    label: '视频内容：',
                    size: 'medium',
                    required: true,
                    placeholder: '请输入内容',
                }, {
                    cols: 24,
                    name: 'recordTime',
                    label: '录制时间：',
                    size: 'medium',
                    slot: 'recordTime',
                    required: true,
                    placeholder: '请选择时间',
                },  {
                    cols: 24,
                    name: 'uploadFile',
                    label: '上传文件：',
                    size: 'medium',
                    slot: 'uploadFile',
                    required: true,
                    placeholder: '请上传文件',
                }, {
                    cols: 24,
                    size: 'medium',
                    slot: 'footer'
                }]
            }
        }
    },
    methods: {
        handleRemove(file) {
            this.form['uploadFile'] = ''
        },
        handleChange(file) {
            this.form['uploadFile'] = file['raw']
        },
        customUpload(config) {
            // console.log('config', config, config.file)
        },
        // 提交二维码图片
        async onSubmit(scope) {
            if (scope.sf()) {
                this.loading = true
                // 自定义上传调用
                // this.$refs.upload.submit()
                // 上传视频
                let formData = new FormData()
                formData.append('file', this.form['uploadFile'])
                // 页面需要修改数据
                let params = Object.assign({},{
                    sampleId: this.form['sampleId'],
                    videoContent: this.form['videoContent'],
                    videoStartTime: this.form['recordTime'][0],
                    videoEndTime: this.form['recordTime'][1],
                    videoStatus: 3
                }) 
                // 调用上传接口
                const res = await Test_Video_AddInfo(formData, params)
                if (res.code === 200 ) {
                    this.loading = false
                    this.$currentDialog.close()
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.detail {
    padding-left: 40px;
    padding-right: 40px;
    &-step1 {
        margin-top: 30px;
        margin-right: 52px;
    }
    &-footer {
        float: right;
    }
    &-picture {
        display: inline-block;
    }
    ::v-deep .detail-datetimerange {
        width: 100%;
    }
    ::v-deep .detail-select {
        width: 100%;
    }
}
</style>
